<template>
    <div class="page-account other">
        <van-nav-bar left-arrow @click-left="$router.back(-1)" style="color:#fff;">
            <div class="more-btn" slot="right" @click="showMoreBtn = !showMoreBtn">
                <img src="../../static/img/images/more.png" alt="">
            </div>
        </van-nav-bar>
        <div class="account-head">
            <div class="report-btn" v-show="showMoreBtn">
                <!--<div @click="Share()">Share(testing)</div>-->
                <div @click="goToReport()">{{$t('m.Reportuser')}}</div>
            </div>
            <div class="head-img">
                <div class="head-img-inbox">
                    <img :src="headerImage" :onerror="defaultHeadImg"/>
                </div>
            </div>
            <div class="head-info">
                <div class="info-name">{{translateString(username)}}</div>
                <!--绑定的联系方式-->
                <div class="face-icon-box confirmed" v-if="account || facebookId">
                    <span>{{$t('m.Confirmed')}}</span>
                    <span class="confirmed-img">
                            <span class="bindphone" style="margin-right: 5px" v-if="account">
                                <img src="../../static/img/images/bindphone.png" />
                            </span>
                        <span class="bindfacebook" style="margin-right: 5px" v-if="facebookId">
                                <img src="../../static/img/images/bindfacebook.png" />
                            </span>
                    </span>
                </div>
                <!-- 评价 -->
                <!--<div class="face-icon-box">-->
                <!--<span class="face-icon">-->
                <!--<img src="../../static/img/images/meh.png" />-->
                <!--18-->
                <!--</span>-->
                <!--<span class="face-icon">-->
                <!--<img src="../../static/img/images/smile.png" />-->
                <!--18-->
                <!--</span>-->
                <!--<span class="face-icon">-->
                <!--<img src="../../static/img/images/frown.png" />-->
                <!--18-->
                <!--</span>-->
                <!--</div>-->
                <div class="join-info" v-if="createTime">
                    <span>{{$t('m.Joined')}}</span> <span>{{getJoinDate(createTime)}}</span>
                </div>
                <div class="follow-btn-box" v-if="userId != userOwnId">
                    <van-button type="default" size="small" class="following-btn" :loading="loadingFollow" @click="toCancelFollow(userId)" v-if="followed">{{$t('m.Following')}}</van-button>
                    <van-button type="default" size="small" class="follow-btn" :loading="loadingFollow" @click="toFollow(userId)" v-else>{{$t('m.Follow')}}</van-button>
                </div>
                <div class="description-box" v-show="description">
                    <p class="description" :class="fold ? 'fold' : 'unfold'" ref="description" v-html="translateString(description)"></p>
                    <div class="more-description" v-show="fold" @click="fold = !fold">{{$t('m.More')}}</div>
                </div>
            </div>
        </div>
        <div class="follow-size">
            <div class="follow-size-item" @click="goToFollow(1)">
                <div class="item-title">{{followers}}</div>
                <div>{{$t('m.Followers')}}</div>
            </div>
            <div class="follow-size-item" @click="goToFollow(2)">
                <div class="item-title">{{following}}</div>
                <div>{{$t('m.Following')}}</div>
            </div>
        </div>
        <van-list
            v-model="loading"
            :finished="finished"
            loading-text=" "
            @load="getList"
            class="main-explore">
            <div class="explore-item" @click="goToDetail(item.id)" v-for="(item, index) in tableData" :key="index"  v-bind:class="[tableData.length % 2 == 0 ? twoClass : oneClass]">
                <div class="explore-item-icon">
                    <img v-lazy="item.cover" alt="" :key="item.cover" :onload="getWidthAndHeight(item, index)" :class="[item.wth == 1 ? 'width-max' : 'height-max']"/>
                </div>
                <div class="explore-item-label">{{translateString(item.title)}}</div>
                <span>
                    <div class="explore-item-label price" v-if="item.priceType == 2">Lks&nbsp;{{regexNum(item.price)}}</div>
                    <div class="explore-item-label price" v-else>Ks&nbsp;{{regexNum(item.price)}}</div>
                </span>
            </div>
        </van-list>

    </div>
</template>
<script>
    import { getSellerDetail, getFollow, getCancelFollow } from '../../static/api/mgc_api'
    import Qs from 'qs'
    export default {
        name: 'otherAccount',
        data() {
            return {
                defaultHeadImg: 'this.src="' + require('../../static/img/images/user-head.png') + '"',
                userOwnId: '',
                userId: '',
                headerImage: '',
                username: '',
                account: '',
                facebookId: '',
                description: '',
                createTime: null,
                showMoreBtn: false,
                followed: false,
                fold: true,
                loadingInfo: false,
                loadingFollow: false,
                followers: '0',
                following: '0',

                oneClass: 'one',
                twoClass: 'two',
                loading: false,
                finished: false,
                tableData: [],
                pageData: {
                    pageNum: 1,
                    pageSize: 10,
                },
                pageInfo: {
                    totalCount: 0,
                    totalPages: 0
                },

            };
        },
        methods: {
            regexNum(v, len, split) {
                if (!v) {
                    return 0
                }
                split = split || ',', len = Math.abs((+len) % 20 || 2)
                v = parseFloat((v + '').replace(/[^\d\.-]/g, '')).toFixed(len) + ''
                v = parseFloat(v) + ''
                return v.replace(/\d+/, function (v) {
                        var lit = v.length % 3 == 0
                        var index = lit ? v.length - 3 : -1
                        return v.split('').reverse().join('').replace(/\d{3}/g, function (k, l) {
                            return k + ((l == index && lit) ? '' : split)
                        }).split('').reverse().join('')
                    }
                )
            },
            translateString(str){
                if (!str) return ''
                return this.$translateLang(str, 'unicodeTozawgyi');
            },
            getJoinDate (value) {
                if(!value){
                    return ''
                }
                let ts = ''
                let date = new Date(value)
                let Y = date.getFullYear()
                let m = date.getMonth() + 1
                if (m < 10) {
                    m = '0' + m
                }
                return ts = m + '/' + Y
            },
            getWidthAndHeight(e, i) {
                let img = new Image();
                img.src = e.cover
                img.onload = () => {
                    // let str = 'width: ' + img.width + ' ; ' + 'height: ' + img.height + ' ; ' + 'loaded'
                    // console.log(str, 'str')
                    if (img.width > 0 || img.height > 0) {
                        let obj = {
                            wth: null
                        }
                        if (Number(img.width) > Number(img.height)) {
                            obj.wth = 1
                        } else {
                            obj.wth = 0
                        }
                        Object.assign(this.tableData[i], obj)
                    }
                };

            },
            getList(pageNum) {
                if (pageNum == 1) {
                    this.pageData.pageNum = 1;
                    //this.tableData = []; 不能添加这一句
                }
                let searchForm = {};
                searchForm.sort = 'create_datetime desc'
                searchForm.userId = this.userId
                searchForm.pageNum = this.pageData.pageNum
                searchForm.pageSize = this.pageData.pageSize
                // let params = Qs.stringify(searchForm, {arrayFormat: 'repeat'})
                getSellerDetail(searchForm).then((res) => {
                    if (res.data.errorID == 0) {
                        // wth判断列表图片宽高 start
                        let dataList = res.data.object.sellerItem.list || []
                        if (this.pageData.pageNum == 1) {
                            let _userInfo = res.data.object.userInfo || ''
                            let followDetail = res.data.object.followDetail || ''
                            if (_userInfo) {
                                this.username = _userInfo.name;
                                this.headerImage = _userInfo.photo || '';
                                this.createTime = _userInfo.create_time;
                                this.account = _userInfo.account || '';
                                this.facebookId = _userInfo.facebook_id || '';
                                if (followDetail) {
                                    this.followers = followDetail.followedCount || '0';
                                    this.following = followDetail.followingCount || '0';
                                }
                                if (followDetail.ifFollowed) {
                                    this.followed = followDetail.ifFollowed;
                                }
                                if (_userInfo.description) {
                                    this.description = _userInfo.description.replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(new RegExp("\n", "gm"),'<br/>')
                                }
                                setTimeout(() => {
                                    if (this.$refs.description) {
                                        // console.log(this.$refs.description.offsetHeight)
                                        if (this.$refs.description.offsetHeight <= 48) {
                                            // description每行高度16,高度少于四行时不显示More
                                            this.fold = false
                                        }
                                    }
                                }, 200)

                            }
                        }
                        for (let i = 0; i < dataList.length; i++) {
                            let obj = {
                                wth: null
                            }
                            Object.assign(dataList[i], obj)
                        }
                        // wth判断列表图片宽高 start
                        // // 刷新列表 or 加载更多
                        if (this.pageData.pageNum == 1) {
                            this.tableData = dataList
                        } else {
                            this.tableData = this.tableData.concat(dataList)
                        }
                        // // 分页信息配置
                        this.pageInfo.totalPages = res.data.object.sellerItem.pages
                        this.pageInfo.totalCount = res.data.object.sellerItem.total
                        this.pageData.pageNum = this.pageData.pageNum + 1
                        if (this.pageData.pageNum > this.pageInfo.totalPages || this.tableData.length >= this.pageInfo.totalCount) {
                            this.finished = true
                        }
                        this.loading = false
                    } else {
                        this.$toast(res.data.message)
                        this.finished = true
                        this.loading = false
                    }
                }).catch((e) => {
                    console.log(e)
                    this.$toast('error, please try again later~')
                    this.finished = true
                    this.loading = false
                })
            },
            goToDetail(id) {
                this.$router.push({
                    path: '/buydetail',
                    query: {
                        id: id
                    }
                })
            },
            goToReport() {
                this.$router.push({
                    path: '/user/report-user',
                    query: {
                        id: this.userId
                    }
                })
            },
            goToFollow(type) {
                // type: 1--followers; 2--following;
                if (type == 1) {
                    if (this.userId == this.userOwnId) {
                        // f_type ----> 1: my-followers; 2: my-following; 3: other-followers; 4: other-following;
                        this.$router.push({
                            path: '/user/follow',
                            query: {
                                id: this.userId,
                                f_type: 1,
                            }
                        })
                    } else {
                        this.$router.push({
                            path: '/user/follow',
                            query: {
                                id: this.userId,
                                f_type: 3,
                            }
                        })
                    }
                } else if (type == 2) {
                    if (this.userId == this.userOwnId) {
                        // f_type ----> 1: my-followers; 2: my-following; 3: other-followers; 4: other-following;
                        this.$router.push({
                            path: '/user/follow',
                            query: {
                                id: this.userId,
                                f_type: 2,
                            }
                        })
                    } else {
                        this.$router.push({
                            path: '/user/follow',
                            query: {
                                id: this.userId,
                                f_type: 4,
                            }
                        })
                    }
                }

            },
            toCancelFollow(id) {
                let data = {
                    'toUserId': id,
                }
                let params = Qs.stringify(data)
                this.loadingFollow = true
                getCancelFollow(params).then((res) => {
                    if (res.data.errorID == 0) {
                        this.followers = Number(this.followers) - 1
                        this.followed = false
                    } else if (res.data.errorID === 100004) {
                        this.$router.push('/login-register/loginregister')
                    } else {
                        this.$toast(res.data.message)
                    }
                    this.loadingFollow = false
                }).catch((e) => {
                    this.loadingFollow = false
                    this.$toast('error, please try again later~')
                })
            },
            toFollow(id) {
                let data = {
                    'toUserId': id,
                }
                let params = Qs.stringify(data)
                this.loadingFollow = true
                getFollow(params).then((res) => {
                    if (res.data.errorID == 0) {
                        this.followers = Number(this.followers) + 1
                        this.followed = true
                    } else if (res.data.errorID === 100004) {
                        this.$router.push('/login-register/loginregister')
                    } else {
                        this.$toast(res.data.message)
                    }
                    this.loadingFollow = false
                }).catch((e) => {
                    this.loadingFollow = false
                    this.$toast('error, please try again later~')
                })
            },
            getUserOwnId() {
                let userInfo = localStorage.getItem('userInfo') || ''
                if (userInfo) {
                    userInfo = JSON.parse(userInfo);
                    this.userOwnId = userInfo.id;
                }
            },
        },
        mounted() {
            // 页面跳转进来获取参数
            this.userId = this.$route.query.userId || ''
            this.getUserOwnId()
        }
    };
</script>
<style>
    .page-account.other .van-nav-bar{
        background-color: #FF9900;
    }
    .page-account.other .van-nav-bar .van-icon{
        color: #fff;
        margin-right: 15px;
        font-size: 18px;
    }
    .page-account.other .van-nav-bar .van-icon:last-child{
        margin-right: 4px;
    }
    .page-account.other .van-popup--left{
        height: 100%;
        width: 80%;
    }
    .page-account.other .follow-btn.van-button--default{
        background: #fff;
        color: #FF9900;
        border: 1px solid #FF9900;
        margin-top: 8px;
        border-radius: 5px;
    }
    .page-account.other .following-btn.van-button--default{
        background: #FF9900;
        color: #fff;
        border-width: 0;
        margin-top: 8px;
        border-radius: 5px;
    }
    .page-account.other .van-list__loading{
        width: 100%;
    }
</style>
<style scoped>
    .user-info-box {
        padding: 15px 0 15px 15px;
        /*border-bottom: 1px solid #F2F2F2;*/

    }
    .user-info {
        position: relative;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-left: 4.1em;
        min-height: 50px;
        line-height: 150%;
        justify-content: space-around;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
    }
    .user-info i{
        position: absolute;
        top: 50%;
        left: 0;
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-top: -25px;
    }
    .user-info p.title{
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        text-decoration: none;
        padding: 0;
        margin: 0;
        text-align: left;
    }
    .user-info i img{
        width: 100%;
        display: block;
    }
    .face-icon-box {
        height: 24px;
        line-height: 24px;
        margin-top: 5px;
    }
    .face-icon-box img{
        display: inline-block;
        height: 100%;
        width:auto;
    }
    .face-icon {
        display:inline-flex;
        height:100%;
        margin-right: 15px;
    }
    .join-info{
        color: #6b6b6b;
        margin: 8px 0;
    }
    .follow-size{
        display: flex;
        padding:14px 0;
        border-top:1px solid #f2f2f2;
        border-bottom:1px solid #f2f2f2;
        margin-top: 15px;
        font-size: 14px;
    }
    .follow-size-item{
        flex: 1;
        text-align: center;
        color:#83888f;
        border-right:1px solid #f2f2f2;
    }
    .follow-size-item:last-child{
        border-right:none;
    }
    .item-title{
        color:#2c3e50;
    }
    .head-img{
        height: 64px;
        position: relative;
    }
    .head-img-inbox{
        background: #fff;
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        margin: -25px 0 0 -25px;
        overflow: hidden;
    }
    .head-img-inbox img{
        width: 100%;
        height: 100%;
        display: block;
    }
    .head-info{
        text-align: center;
    }
    .head-info .info-name{
        padding: 0px 0 5px;
    }
    .head-info .confirmed{
        /*margin: 6px 0;*/
        color: #6b6b6b;
    }
    .head-info .confirmed .bindphone {
        background: #FF9900;
        border-radius: 50%;
        padding: 5px;
        box-sizing: padding-box;
        display:inline-flex;
        height: 14px;
        width: 14px;
        margin-right: 7px;
    }
    .head-info .confirmed .bindfacebook {
        background: #0E6C9C;
        border-radius: 50%;
        padding: 5px;
        box-sizing: padding-box;
        display:inline-flex;
        height: 14px;
        width: 14px;
        margin-right: 7px;
    }
    .confirmed-img{
        height: 100%;
    }
    .head-info .confirmed img {
        height: 14px;
    }
    .more-btn{
        display: inline-table;
        vertical-align: middle;
    }
    .more-btn img {
        display: block;
        width: 24px;
        height: 24px;
    }
    .description-box{
        padding: 10px 4% 0;
        text-align: left;
    }
    .description {
        margin: 0;
        word-wrap: break-word;
        display: -webkit-box;
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
        /* autoprefixer: on */
        overflow: hidden;
        text-align: left;
        line-height: 16px;
    }
    .description.fold{
        -webkit-line-clamp: 3;
    }
    .description.unfold{
        -webkit-line-clamp: 100;
    }
    .more-description {
        color:rgb(14, 108, 156);
        margin-top: 3px;
    }
    .main-explore {
        padding: 0;
        margin:0;
        margin-bottom: 14px;
    }
    .main-explore{
        position: relative;
        background: #fff;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        text-align:center;
        flex-wrap: wrap;
        margin-top: 8px;
        padding-right: 4%;
    }
    .main-explore .explore-item{
        display: block;
        padding: 14px 0 0;
        margin-left: 4%;
        width: 46%;
        text-decoration: none;
        color: #000;
        /*margin-right: 8%;*/
        /*border-bottom: 1px solid #F2F2F2;*/
    }
    .main-explore .explore-item.one:nth-last-child(2), .main-explore .explore-item.two:nth-last-child(2){
        border-bottom: none;
    }
    .main-explore .explore-item.two:nth-last-child(3){
        border-bottom: none;
    }
    .main-explore .explore-item:nth-child(2n){
        margin-right: 0;
    }

    .main-explore .explore-item .explore-item-icon{
        width: 100%;
        /*height: 135px;*/
        /*margin: 0 auto 5px;*/
        /*border: 1px solid #eee;*/
        align-items: center;
        display: flex;
        background: #f0f0f0;
        position: relative;
        z-index: 0;
        height: 0;
        padding: 0 0 100%;
        overflow: hidden;
        border-radius: 6px;
    }
    .main-explore .explore-item .explore-item-icon::before{
        content: "Tolymoly";
        position: absolute;
        top: 50%;
        bottom: 0;
        right: 0;
        left: 0;
        text-align: center;
        background: #f0f0f0;
        font-size: 1.5rem;
        font-weight: 700;
        color: #c0bfbf;
        /*line-height: 135px;*/
        z-index: -1;
        margin-top: -12px;
    }
    .main-explore .explore-item > *{
        display: block;
        margin: 0 auto;
    }
    .main-explore .explore-item-icon img {
        /*max-width:100%;*/
        /*max-height:100%;*/
        /*display: block;*/
        /*margin: 0 auto;*/
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1;
        width: 100%;
    }
    .main-explore .explore-item-icon img.width-max{
        width: auto;
        left: 50%;
        right: auto;
        height: 100%;
        transform: translate(-50%);
    }
    .main-explore .explore-item-icon img.height-max{
        top: 50%;
        transform: translateY(-50%);
    }
    .main-explore .explore-item .explore-item-label{
        /*color: inherit;*/
        font-size: 14px;
        line-height: 160%;
        margin-top: 4px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;

        /*font-size: 12px;*/
        /*font-family: Bitter,sans-serif;*/
        color: #000;
    }
    .main-explore .explore-item .explore-item-label.price{
        /*color: #DB3743;*/
        /*font-size: 16px;*/
        /*font-weight: 600;*/
        font-size: 14px;
        color: #4c4c4c;
    }
    .main-explore .explore-item .explore-item-label.dates{
        color: #A1A1A1;
    }
    .report-btn {
        position: absolute;
        top: 5px;
        right: 0;
        width: 140px;
        /*height: 42px;*/
        line-height: 42px;
        z-index: 99;
        background: #fff;
        padding: 0 10px;
        border: 1px solid #999;
    }
    .account-head{
        position: relative;
    }
    @media (max-width:375px) and (min-width:321px) {
        .head-img{
            height: 75px;
        }
        .head-img-inbox{
            width: 56px;
            height: 56px;
            margin: -28px 0 0 -28px;
        }
    }
    @media (max-width:1080px) and (min-width:376px) {
        .head-img{
            height: 83px;
        }
        .head-img-inbox{
            width: 62px;
            height: 62px;
            margin: -31px 0 0 -31px;
        }
    }
</style>
